<template>
    <div class="" id="facRe">
      <div class="permission-content bg-purple user-table" >
          <el-form :inline="true" size="medium"  ref="form" :model="form" label-width="160px" style="position:relative;">
          
                <el-form-item v-show='edit' label="维修单号" >
                  <el-input disabled v-model="form.id"></el-input>
                </el-form-item>
                <el-form-item v-show='edit' label="报修状态" >
                <el-select clearable v-model="form.reStatus" placeholder="请选择">
                  <el-option
                    v-for="item in basic.selReStatus"
                    :key="item.dict_key"
                    :label="item.dict_value"
                    :value="item.dict_key">
                  </el-option>
                </el-select>
                </el-form-item>
                  <el-form-item v-show='edit' label="维修日期" >
                 
                  <el-date-picker
                    v-model="form.repairDate"
                    align="right"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                  </el-date-picker>
                </el-form-item>
                  <el-form-item label="当前设备所属单位" >
                     <el-input disabled v-model="form.company"></el-input>
                </el-form-item>
                  <el-form-item label="设备名称" >
                  <el-input disabled v-model="form.facName"></el-input>
                </el-form-item>
                  <el-form-item label="设备编号" >
                     <el-input disabled v-model="form.facCode"></el-input>
                </el-form-item>
                 <el-form-item label="设备类型" >
                  <el-input disabled v-model="form.deviceType"></el-input>
                </el-form-item>
                  <el-form-item label="经办人" v-show='edit'  :class="[role=='admin'?'':'hidden']">
                     <el-input v-model="form.operator" @focus="dialogOperator=true"></el-input>
                </el-form-item>
                <el-form-item  label="维修内容" >
                   <el-input v-model="form.remark"></el-input>
                </el-form-item>
                <el-form-item label="金额" >
                  <el-input v-model="form.money"></el-input>
                </el-form-item>
                <el-form-item label="图片" >
                    <el-upload
                      list-type="picture-card"
                      :action="uploadFileUrl"
                      :limit="3"
                      :disabled="edit"
                      :data="{'token':token}"
                      :on-success="uploadSuccess"
                      :file-list="fileList"
                      :on-preview="handlePictureCardPreview"
                      :before-upload="beforeAvatarUpload"
                      :on-remove="handleRemove">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                    <!-- <el-input v-model="form.img"></el-input> -->
                </el-form-item>
                <div style="position:absolute;right:40px;bottom:30px;">
                  <el-button v-preventReClick type="primary" @click="onSubmit(form)">确 定</el-button>
                  <el-button v-preventReClick type="primary" @click="cancel()">取消</el-button>
                </div>
          </el-form>
          <el-dialog :close-on-click-modal="false"  title="维修人员" :visible.sync="dialogOperator">
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText">
          </el-input>
           <el-tree
            class="filter-tree"
            :data="operTree"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            @node-click="nodeClick"
            ref="tree">
          </el-tree>
          </el-dialog>
      </div>
    </div>
</template>
<script>
import { submitRepair,editRepair} from '@/api/facility/facility'
import { getOperator} from '@/api/user'
import {disposeDict} from '@/utils/dicts'
import upload from '@/api/files'
import {delFile} from '@/api/files'

export default {
    data() {
      return{
          dialogImageUrl: '',
          dialogVisible: false,
          tableData:[],
          uploadFileUrl:process.env.VUE_APP_UPLOAD_URL,
          basic:{
            selReStatus:disposeDict('restatus','arr'),
            deviceType:disposeDict('facType','obj')
          },
          token:this.$store.state.user.token,
          file:{},
          fileList:[],
          pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
          formData:{},
          form: {
         
        },
        operTree:[],
        defaultProps: {
          children: 'children',
          label: 'userName'
        },
        filterText:'',
        dialogOperator:false,
          show:false,
          edit:false,
          role:'admin'          
      }  
    },
    watch:{
      filterText(val){
        this.$refs.tree.filter(val)
      },
    },
    created(){
      this.getOperator()
      this.form=this.$route.params
      this.edit=this.$route.params.edit
      this.role=this.$store.state.user.role
      if(this.form.img){
        let arr=this.form.img.split(";")

        for (let i = 0; i < arr.length-1; i++) {
          this.fileList.push({
            uid:i,
            url:process.env.VUE_APP_IMG_API + arr[i]
          })
          
        }
      }
      if(this.form.deviceType){
         this.form.deviceType=this.basic.deviceType[this.form.deviceType]
      }
    },
    mounted(){
    },
    methods:{
      uploadSuccess(res,file,filelist){
        this.fileList=filelist
        // this.fileList.push(res.data)
        console.log(this.fileList)

      },
     //上传前
     beforeAvatarUpload(file){
      console.log(file.type)
      const isImg = file.type === 'image/jpeg'|| file.type === 'image/png'|| file.type === 'image/gif'|| file.type === 'image/tiff'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isImg) {
        this.$message.error('只能上传图片格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      //返回 true 时进行请求上传
      return isImg && isLt5M 
     },
      //图片上传
      handleRemove(file, fileList) {
        console.log(file, fileList);
        delFile(file).then(res=>{
           this.$message({
          message: '删除成功',
          type: 'success'
        });
        })
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //获取维修人员
      getOperator(){
        getOperator().then(res=>{
          this.operTree=res.data
        })
      },
      //删选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.userName.indexOf(value) !== -1;
      },
      nodeClick(data){
        this.form.operator=data.userName
        this.dialogOperator=false
      },
      onSubmit(data) {
        data.fileList=this.fileList

if(this.edit){
          editRepair(data).then(res=>{
          this.$message({
          message: '审批成功',
          type: 'success'
        });
        this.$router.back()
        })
        }else{
          submitRepair(data).then(res=>{
          this.$message({
          message: '提交成功,等待审批中',
          type: 'success'
        });
        this.$router.back()
        })
        }
        
        
      },
      cancel(){
      this.$router.back()

      },
     
    }
}
</script>
<style lang='scss' scoped>
#facRe{
    .el-form{
      padding: 20px;
      height: calc(100vh - 50px);
    }
}
.hidden{
  display: none;
}

</style>